<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<uni-nav-bar 
			title="审批" 
			:border="false"
			:fixed="true"
			:status-bar="true"
			background-color="#4980FF"
			color="#FFFFFF"
			left-icon="back"
			@clickLeft="goBack">
		</uni-nav-bar>
		
		<scroll-view class="list" scroll-y>
			<!-- 审批意见 -->
			<uni-section title="审批意见" type="line">
				<view class="approval-options">
					<view class="option-item" :class="{ 'selected': isPass }" @click="setSelect(true)">
						<uni-icons type="checkmarkempty" size="20" :color="isPass ? '#165DFF' : '#999'"></uni-icons>
						<text class="option-text">通过</text>
					</view>
					<view class="option-item" :class="{ 'selected': !isPass }" @click="setSelect(false)">
						<uni-icons type="closeempty" size="20" :color="!isPass ? '#FF6B6B' : '#999'"></uni-icons>
						<text class="option-text">不通过</text>
					</view>
				</view>
			</uni-section>
			
			<!-- 撤回位置 -->
			<uni-section title="撤回位置" type="line">
				<uni-list-item 
					:title="selectedOutOption || '请选择'"
					:showArrow="true"
					@click="handleOutClick">
				</uni-list-item>
			</uni-section>
			
			<!-- 合作部意见 -->
			<uni-section title="合作部意见" type="line">
				<uni-easyinput
					v-model="content"
					type="textarea"
					placeholder="请输入审批意见"
					:maxlength="100"
					:autoHeight="true"
					class="opinion-input">
				</uni-easyinput>
			</uni-section>
			
			<!-- 手写签名 -->
			<uni-section title="手写签名" type="line">
				<view class="signature-container">
					<view class="signature-placeholder">
						<uni-icons type="edit" size="40" color="#CCCCCC"></uni-icons>
						<text class="placeholder-text">点击此处进行手写签名</text>
					</view>
				</view>
				<view class="signature-actions">
					<uni-button type="default" size="small" @click="clearSignature">清空</uni-button>
					<uni-button type="primary" size="small" @click="saveSignature">保存签名</uni-button>
				</view>
			</uni-section>
			
			<!-- 提交按钮 -->
			<view class="submit-section">
				<uni-button 
					type="primary" 
					size="large" 
					@click="submitApproval"
					:custom-style="{ backgroundColor: '#4980FF', borderColor: '#4980FF' }">
					提交审批
				</uni-button>
			</view>
		</scroll-view>
		
		<!-- 底部弹出层 -->
		<uni-popup ref="outPicker" type="bottom" :mask-click="true" @change="onPopupChange">
			<view class="picker-content">
				<view class="picker-header">
					<text class="picker-cancel" @click="closeOutPicker">取消</text>
					<text class="picker-title">选择使用单位</text>
					<text class="picker-confirm" @click="confirmOut">确定</text>
				</view>
				<scroll-view scroll-y class="picker-list">
					<view class="picker-item" v-for="(item, index) in outOptions" :key="index" 
						:class="{ 'selected': selectedOutOption === item.value }"
						@click="selectOutOption(item.value)">
						<text>{{ item.label }}</text>
						<uni-icons v-if="selectedOutOption === item.value" type="checkmarkempty" size="16" color="#4980FF"></uni-icons>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPass: true,
				content: '',
				showOutPicker: false,
				outOptions: [
					{ label: '西藏于睿建筑劳务公司', value: 'company1' },
					{ label: '西藏于睿建筑劳务公司', value: 'company2' },
					{ label: '西藏于睿建筑劳务公司', value: 'company3' },
					{ label: '西藏于睿建筑劳务公司', value: 'company4' },
					{ label: '西藏于睿建筑劳务公司', value: 'company5' },
					{ label: '西藏于睿建筑劳务公司', value: 'company6' }
				],
				selectedOutOption: '',
				signatureImage: ''
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			setSelect(pass) {
				this.isPass = pass
			},
			handleOutClick() {
				this.$refs.outPicker.open()
			},
			closeOutPicker() {
				this.$refs.outPicker.close()
			},
			onPopupChange(e) {
				if (!e.show) {
					this.showOutPicker = false
				}
			},
			confirmOut() {
				this.$refs.outPicker.close()
			},
			selectOutOption(value) {
				this.selectedOutOption = value
			},
			clearSignature() {
				this.signatureImage = ''
				uni.showToast({
					title: '签名已清空',
					icon: 'success'
				})
			},
			saveSignature() {
				// 模拟保存签名
				this.signatureImage = 'signature_data'
				uni.showToast({
					title: '签名已保存',
					icon: 'success'
				})
			},
			submitApproval() {
				if (!this.content.trim()) {
					uni.showToast({
						title: '请输入审批意见',
						icon: 'none'
					})
					return
				}
				
				if (!this.selectedOutOption) {
					uni.showToast({
						title: '请选择撤回位置',
						icon: 'none'
					})
					return
				}
				
				uni.showLoading({
					title: '提交中...'
				})
				
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '审批提交成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}, 1000)
			}
		}
	}
</script>

<style>
	.container {
		flex: 1;
		background-color: #E6EAF3;
		padding-top: 88px;
	}
	
	.list {
		flex: 1;
		padding: 16px;
	}
	
	.approval-options {
		display: flex;
		gap: 16px;
		padding: 16px 0;
	}
	
	.option-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 16px;
		background-color: #F5F7FA;
		border-radius: 8px;
		border: 2px solid transparent;
	}
	
	.option-item.selected {
		background-color: #EFF3FF;
		border-color: #4980FF;
	}
	
	.option-text {
		font-size: 16px;
		color: #333;
	}
	
	.opinion-input {
		margin: 16px 0;
	}
	
	.signature-container {
		width: 100%;
		height: 200px;
		background-color: #FFFFFF;
		border: 2px dashed #CCCCCC;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 16px 0;
	}
	
	.signature-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	
	.placeholder-text {
		font-size: 14px;
		color: #999;
	}
	
	.signature-actions {
		display: flex;
		gap: 16px;
		justify-content: center;
		margin-bottom: 16px;
	}
	
	.submit-section {
		margin: 32px 0;
	}
	
	.picker-content {
		background-color: #FFFFFF;
		border-radius: 16px 16px 0 0;
		padding: 20px;
		max-height: 60vh;
	}
	
	.picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 16px;
		border-bottom: 1px solid #EEEEEE;
		margin-bottom: 16px;
	}
	
	.picker-cancel, .picker-confirm {
		font-size: 16px;
		color: #4980FF;
	}
	
	.picker-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}
	
	.picker-list {
		max-height: 40vh;
	}
	
	.picker-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 0;
		border-bottom: 1px solid #F0F0F0;
	}
	
	.picker-item:last-child {
		border-bottom: none;
	}
	
	.picker-item.selected {
		color: #4980FF;
	}
</style>
